<template>
  <div @mousedown="tooltipDisabled=true"
         @mouseup="tooltipDisabled=false">
      <span class="blue_line"></span>
      <div class="content">
        <!-- <i :class="iconCLassName"></i> -->
        
        <span class="text">
          <i v-if="state==='loading'" class="el-icon-loading node-state"></i>
          <i v-else-if="state==='success'" class="el-icon-circle-check node-state"></i>
          <i v-else-if="state==='failed'" class="el-icon-circle-close node-state"></i>
          <i v-else-if="state==='warning'" class="el-icon-warning-outline node-state"></i>
          <i v-else></i>
        {{text}}</span>
      </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      tooltipDisabled: false,
      text: this.contentText,
      state: this.nodeState,
    };
  },
  props: [
    'nodeState',
    'iconCLassName',
    'contentText',
  ],
  methods: {

  },
};
</script>
<style lang="less" scoped>
.el-icon-loading{
  color: #909399 !important;
}
.el-icon-circle-check{
  color: #67C23A !important;
}
.el-icon-circle-close{
  color: #F56C6C !important;
}
.el-icon-warning-outline{
  color: #E6A23C !important;
}
.text{
  display: block;
  text-align: center;
}


.fy_node_diamond,.fy_node_square{
  position: relative;
}

i.node-state{
  position: absolute;
}

.fy_node_diamond .text{
  transform:rotate(-45deg);
  line-height: 64px;
  width:70px;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fy_node_diamond i.node-state{
  position: absolute;
  margin-left: -20px;
  transform:rotate(-45deg);
  top: 2px !important;
  margin-left: 2px !important;
}

.fy_node_ellipse i.node-state{
  display: inline-block;
  position:inherit;
}



</style>
